<template>
  <div class="plank-wrap m-t-l p-xl">
    <div class="plank-header df">
      <div>
        <van-icon name="diamond-o" />
        <slot name="header-title" />
      </div>
      <div>
        更多
        <van-icon name="arrow" />
      </div>
    </div>
    <van-tabs v-model="active" :swipe-threshold="5">
      <van-tab title="中医小药方"></van-tab>
      <van-tab title="养生"></van-tab>
      <van-tab title="针灸"></van-tab>
      <van-tab title="推拿"></van-tab>
      <van-tab title="医疗"></van-tab>
    </van-tabs>
    <div class="m-xl" v-if="type == 'row'">
      <div class="rows-wrap">
        <div class="rows df">
          <div class="video-wrap row dib m-r-xl" v-for="item in 5" :key="item">
            <div class="img">
              <img
                src="https://img.zcool.cn/community/01e4a65bd6d7d1a801213dea52b6eb.jpg@180w_1l_2o_100sh.jpg"
              />
            </div>
            <div>
              <p>小儿溃疡,中医作曲</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="type == 'col'">
      <div class="goods-1 fx">
        <div class="avatar">
          <img
            src="https://img.zcool.cn/community/01e4a65bd6d7d1a801213dea52b6eb.jpg@180w_1l_2o_100sh.jpg"
          />
        </div>
      </div>
    </div>
    <div v-else>
      特别
    </div>
  </div>
</template>

<script>
export default {
  name: "Plank",
  props: {
    type: String,
    data: Array
  },
  data() {
    return {
      active: 0
    };
  }
};
</script>
<style lang="scss" scoped>
.plank-wrap {
  background-color: white;
  .plank-header {
    justify-content: space-between;
  }
  .video-wrap {
    .img {
      width: 10.3846 * $size;
      height: 10.3846 * $size;
      background-color: $dark;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }
  .m-xl .rows-wrap {
    .rows {
      width: 100%;
      overflow: auto;
    }
  }
  .goods-1 {
    flex-wrap: nowrap;
    .avatar {
      width: $size * 10;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
